<template>
  <div>
    <van-nav-bar fixed title="积分分红奖励" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top pos-r mlr-25">
      <div class="bg-primary pos-r br-15 mt-40">
        <img :src="bgImg">
        <div class="pos-a color-white left-50 top-60">
          <p>累计分红奖励</p>
          <p class="fs-56">￥{{ TotalMoney }}</p>
        </div>
      </div>
      <div class="flex-s-c mt-35">
        <p class="fs-28 fw-600">分红奖励记录</p>
        <div
          class="date-box bg-gray-1 dis-inb flex-s-c plr-20 br-25 flex-s-0 flex-g-0 ml-20"
          @click="openDateSelect"
        >
          <span>{{ datetime }}</span>
          <van-icon :name="Icon" size="12" />
        </div>
      </div>
      <van-grid column-num="3" class="mt-30">
        <van-grid-item text="创建时间" />
        <van-grid-item text="积分基数" />
        <van-grid-item text="补贴金额" />
      </van-grid>
      <van-grid v-for="(item, index) in RewardList" :key="index" column-num="3">
        <van-grid-item :text="item.AddTime" />
        <van-grid-item :text="item.Balance" />
        <van-grid-item class="tt" :text="'￥' + item.Money" />
      </van-grid>
      <no-data v-if="RewardList.length === 0" />
      <p v-if="end === true && RewardList.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
      <datetime-select
        type="year-month"
        title="请选择时间"
        :show="dateSelect"
        @onConfirm="onConfirm"
        @clickOverlay="clickOverlay"
      />
    </div>
  </div>
</template>

<script>
import datetimeSelect from 'components/datetimeSelect'
import noData from 'components/noData'
import { GetRecordTotal, GetRecordPageList } from 'api/RewardPoints'
import utils from 'utils/utils'
export default {
  components: {
    datetimeSelect,
    noData
  },
  data() {
    return {
      bgImg: require('assets/images/integrate.png'),
      // 时间筛选
      datetime: '',
      dateSelect: false,
      Icon: 'arrow-down',

      TotalMoney: 0,
      requestData: {
        PageIndex: 1,
        PageSize: 10
      },
      RewardList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  watch: {
    dateSelect(newVal, oldVal) {
      if (newVal === true) {
        this.Icon = 'arrow-up'
      } else {
        this.Icon = 'arrow-down'
      }
    }
  },
  created() {
    this.datetime = utils.dateFomat('yyyy', new Date()) + '年' + utils.dateFomat('m', new Date()) + '月'
    const value = utils.thisMonth()
    this.requestData.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
    this.requestData.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
    this.GetRecordTotal()
    this.GetRecordPageList()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    openDateSelect() {
      this.dateSelect = true
    },
    onConfirm(value) {
      console.log(value)
      this.datetime = utils.dateFomat('yyyy', value) + '年' + utils.dateFomat('m', value) + '月'
      const _value = utils.chooseMonth(value)
      this.requestData.StartTime = _value.startDate ? _value.startDate.replace(/\./g, '-') : null
      this.requestData.EndTime = _value.endDate ? _value.endDate.replace(/\./g, '-') : null
      this.requestData.PageIndex = 1
      this.RewardList = []
      this.GetRecordPageList()
      this.dateSelect = false
    },
    clickOverlay() {
      this.dateSelect = false
    },
    GetRecordTotal() {
      GetRecordTotal().then(res => {
        if (res) {
          this.TotalMoney = res.Data.TotalMoney
        }
      })
    },
    GetRecordPageList() {
      GetRecordPageList(this.requestData).then(res => {
        if (res) {
          // this.TotalMoney = res.Data.TotalMoney
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              tem.AddTime = tem.AddTime.replace(/-/g, '/')
              console.log(tem.AddTime)
              tem.AddTime =
                utils.dateFomat('yyyy', new Date(tem.AddTime)) +
                '年' +
                utils.dateFomat('m', new Date(tem.AddTime)) +
                '月' +
                utils.dateFomat('d', new Date(tem.AddTime)) +
                '日'
              tem.Balance = Math.abs(tem.Balance)
              tem.Money = Math.abs(tem.Money)
              this.RewardList.push(tem)
            })
          }
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          console.log('加载')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetRecordPageList()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.date-box {
  height: 50px;
  line-height: 50px;
}
.tt {
  /deep/ .van-grid-item__text {
    @include color-primary;
  }
}
</style>
